<template>
  <div >
      <el-col :span="8" v-for="(item, index) in list" :key="index">
        <div class="myChart" ></div>
      </el-col>

  </div>
</template>
<style scoped>
.myChart{
    width: 60%;
    height: 200px;
    border: 1px solid red;
    margin: 0 auto;
  }
</style>
<script>
import axios from 'axios'

// import echarts from "echarts";
require("echarts/theme/macarons"); //引入主题,可以不引入，有默认的
export default {
  data() {
    return {

      list: [
        {
          id: 1,
          value: 70,
          name: "CPU利用率",
        },
        {
          id: 2,
          value: 50,
          name: "内存利用率",
        },
        {
          id: 3,
          value: 60,
          name: "硬盘利用率",
        },
      ],


    };
  },
  mounted() {
     this.drawLine();
  },
 methods: {
    drawLine() {



        // const _this=this
        // //获取回答数据，res[],num,stitle
        // axios({
        //     url:'/questionnaireContent/?questionnaireId='+this.$route.query.id,
        //     method:'get',
        // }).then(function(resp){
        //     console.log('444'+resp)
        //     const data1=JSON.stringify(resp.data.data)
        //     console.log('333'+typeof(data1))
        //     const jsonObj =JSON.parse(data1)
        //     var arr=[];
        //     for(let i in jsonObj){
        //         arr.push(jsonObj[i])
        //     }
        //     console.log('222'+typeof(arr))
        //     console.log('111'+data1)

        // })  

      var echarts = require("echarts");
      var roseCharts = document.getElementsByClassName("myChart"); // 对应地使用ByClassName
      for (var i = 0; i < roseCharts.length; i++) {
        // 通过for循环，在相同class的dom内绘制元素
        var myChart = echarts.init(roseCharts[i]);
        myChart.setOption({


        //   series : [
        //   {
        //     // name:'每月花费',
        //     name:'',
        //     type:'bar',
        //     barWidth: '60%',
        //     data:[995,666,444,858,654,236,645,546,846,225,547,356]
        //   }
        // ],
        // color: ['#f44'],
        // tooltip : {
        //   trigger: 'axis',
        //   axisPointer : {
        //     type : 'shadow'
        //   }
        // },
        // xAxis : [
        //   {
        //     type : 'category',
        //     data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
        //     axisTick: {
        //       alignWithLabel: true
        //     }
        //   }
        // ],
        // yAxis : [
        //   {
        //     type : 'value'
        //   }
        // ],



          series: [
            {
              type: "gauge",
              axisLine: {
                lineStyle: {
                  width: 30,
                  color: [
                    [0.3, "#67e0e3"],
                    [0.7, "#37a2da"],
                    [1, "#fd666d"],
                  ],
                },
              },
              pointer: {
                itemStyle: {
                  color: "auto",
                },
              },
              axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                  color: "#fff",
                  width: 2,
                },
              },
              splitLine: {
                distance: -30,
                length: 30,
                lineStyle: {
                  color: "#fff",
                  width: 4,
                },
              },
              axisLabel: {
                color: "auto",
                distance: 40,
                fontSize: 14,
              },
              detail: {
                valueAnimation: true,
                formatter: "{value}%",
                color: "auto",
                fontSize: 16,
              },
              data: [
                {
                  value: this.list[i].value,
                  name: this.list[i].name,
                },
              ],
            },
          ],
        
        });

        window.addEventListener('resize',function() {myChart.resize()});


      }
    },
  },

}
</script>
//  https://blog.csdn.net/xu_xu_0924/article/details/114361645?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-8.no_search_link&spm=1001.2101.3001.4242

